<template>
  <view class="layout">
    <view class="navbar">
      <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
      <view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
        <div class="title">{{title}}</div>
        <div class="search">
          <uni-icons class="search-icon" type="search" color="#888" size="18"></uni-icons>
          <div class="text">搜索</div>
        </div>
      </view>
      
    </view>
    
    <view class="fill" :style="{height:getNavBarHeight()+'px'}">
      
    </view>
  </view>
</template>
  
<script setup> 
import { ref } from 'vue';
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight} from '../../utils/system.js'

defineProps({
  title:{
    type:String,
    default:'标题'
  }
})
</script>

<style lang="scss" scoped>
.layout{
  .navbar{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background:
    linear-gradient(to bottom,transparent ,#fff 400rpx ),
    linear-gradient(to right,#beecd8 20%,#F4E2D8);
    padding: 0 30rpx;
    .statusBar{
      }
      .titleBar{
        display: flex;
        align-items: center;
        .title{
          font-size: 22px;
          font-weight: 700;
          color: $text-font-color-1;
        }.search{
          background: rgba(255, 255, 255,.4);
          border: 1rpx solid #fff;
          width: 220rpx;
          height: 50rpx;
          border-radius: 60rpx;
          margin-left: 30rpx;
          font-size: 28rpx;
          color: #999;
          display: flex;
          align-items: center;
        }
        .search-icon{
          padding-left: 10rpx;
        }
        .text{
          padding-left: 10rpx;
        }
      }
      .fill{
      
    }
  }
}
</style>